<template>
  <div class="werapp">
    <van-nav-bar title="练习" />
    <div class="box">
      <ul>
        <li>
          <img src="../assets/lianx/下载.png" alt="" />
          <p>考点练习</p>
        </li>
        <li>
          <img src="../assets/lianx/下载 (1).png" alt="" />
          <p>套卷练习</p>
        </li>
        <li>
          <img src="../assets/lianx/下载 (2).png" alt="" />
          <p>仿真模考</p>
        </li>
        <li>
          <img src="../assets/lianx/下载 (3).png" alt="" />
          <p>错题练习</p>
        </li>
        <li>
          <img src="../assets/lianx/下载 (4).png" alt="" />
          <p>测评记录</p>
        </li>
        <li>
          <img src="../assets/lianx/下载 (5).png" alt="" />
          <p>习题收藏</p>
        </li>
      </ul>
    </div>
    <div class="title">
      <p class="title-item">近期模考</p>
      <div class="title-img">
        <span class="color">默认排序</span>
        <img src="../assets/lianx/empty@2x.a2fa524d.png" alt="" />
        <span>时间</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.werapp {
  background: rgb(242, 243, 245);
}
.box {
  width: 95%;
  margin: 0.4rem auto;
  height: 3.573rem;
  background: #fff;
  border-radius: 0.133rem;
  ul {
    display: flex;
    align-items: center;
    padding: 20px;
    flex-wrap: wrap;
    li {
      width: 24%;
      text-align: center;
    }
  }
}
.title {
  width: 95%;
  margin: 0.4rem auto;
  height: 3.573rem;
  background: #fff;
  border-radius: 0.133rem;
  .title-item{
    margin: 20px;
    font-size: 30px;
    padding: 20px;
  }
  .title-img{
    display: flex;
    justify-content: space-between;
    margin: 20px;
.color{
  color: rgb(235, 97, 0);
}
  }
}
</style>